<!-- 设备台账-设备运行管理-设备运行记录页面 -->
<template>
  <div class="equip-wrap-common equip-run-record">
    <!-- <div class="equip-table-btns">
      <px-button type="primary" @click="addBtn">新增运行记录</px-button>
    </div> -->
    <px-table :data="tableData" class="equip-table" height="calc(100vh - 318px)" border>
      <px-table-column prop="eqpId" label="设备编号" min-width="160" fixed="left" show-overflow-tooltip />
      <px-table-column prop="eqpName" label="设备名称" min-width="160" show-overflow-tooltip />
      <px-table-column prop="eqpRunStatus" label="设备运行状态" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          <px-tag
            v-if="scope.row.eqpRunStatusValue"
            effect="plain"
            :style="{
              color: `${scope.row.eqpRunStatus === '5' ? '#000' : '#fff'}`,
              border: 'none',
              backgroundColor: `${tagBgColorList[scope.row.eqpRunStatus]}`
            }"
          >
            {{ scope.row.eqpRunStatusValue }}
          </px-tag>
        </template>
      </px-table-column>
      <px-table-column prop="downCauseName" label="状态原因" min-width="120" show-overflow-tooltip />
      <px-table-column prop="downTypeName" label="状态类型" min-width="120" show-overflow-tooltip />
      <px-table-column prop="startTime" label="状态开始时间" min-width="160" sortable show-overflow-tooltip />
      <px-table-column prop="endTime" label="状态结束时间" min-width="160" sortable show-overflow-tooltip />
      <px-table-column prop="runTimes" label="状态时长" min-width="140" show-overflow-tooltip />
      <px-table-column prop="classNameDesc" label="科室" min-width="80" show-overflow-tooltip />
      <px-table-column prop="systemName" label="系统" min-width="130" show-overflow-tooltip />
      <!-- <px-table-column label="操作" width="150" fixed="right" align="center"></px-table-column> -->
      <px-table-column label="操作" width="100" fixed="right" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button link icon="Tickets" type="primary" @click="handleView(scope.row)" />
          </px-tooltip>
          <!-- <px-tooltip content="编辑" placement="top">
            <px-button link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
          </px-tooltip> -->
          <!-- <px-tooltip content="删除" placement="top">
            <px-button link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
          </px-tooltip> -->
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <!-- 查看页面 -->
    <ViewEquipDialog :dialogVisible="viewDialogVisible" :rowData="rowData" @closeDialog="closeDialog" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_RUNMANAGE_RECORD_RECORD"
});
// import { queryDictData } from "@/api/common";
// import { getEquipNameSelect } from "@/api/equip/archive";
import { getRunRecord, deleteRunRecord } from "@/api/equip/runManage";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
// import AddEquipDialog from "../../record/components/AddEquipDialog.vue";
import ViewEquipDialog from "../../record/components/ViewEquipDialog.vue";

import { formatDuration } from "@/utils/pengxi";

// 父级传过来的值
const props = defineProps(["eqpId", "rowDataVal"]);

onMounted(() => {
  queryTable();
  // querySelectList();
});

const tagBgColorList = {
  1: "#10B981", // 运行
  2: "#9254DE", // 故障（报警且停机）/异常停机
  3: "#F59E0B", // 带病（报警且运行）/异常
  4: "#909399", // 离线
  5: "#efefef" // 停机
};
const state = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [], // 列表数据
  total: 0, // 列表数量
  // classNameList: [], // 科室下拉框
  // categoryList: [], // 设备总称下拉框
  rowData: {}, // 设备编号
  // dialogVisible: false, // 弹窗显示隐藏
  dialogType: "add", // 弹窗默认新增
  viewDialogVisible: false
});

// const { queryParams, tableData, total, classNameList, categoryList, rowData, dialogVisible, dialogType, viewDialogVisible } = toRefs(state);
const { queryParams, tableData, total, rowData, viewDialogVisible } = toRefs(state);

// 查询运行记录列表
const queryTable = async () => {
  queryParams.value.eqpId = props.eqpId;
  const res = await getRunRecord(queryParams.value);
  tableData.value = res?.data || [];
  total.value = res?.total;
};
// 关闭弹窗
const closeDialog = () => {
  // dialogVisible.value = false;
  viewDialogVisible.value = false;
};
// 查看设备
const handleView = (row: any) => {
  rowData.value = row;
  viewDialogVisible.value = true;
};
// 新增运行记录-显示弹窗
// const addBtn = () => {
//   rowData.value = JSON.parse(JSON.stringify(props.rowDataVal));
//   dialogType.value = "add";
//   dialogVisible.value = true;
// };
// 编辑运行记录-显示弹窗
// const handleEdit = (row: any) => {
//   dialogType.value = "edit";
//   rowData.value = JSON.parse(JSON.stringify(row));
//   dialogVisible.value = true;
// };
// 删除运行记录
const handleDelete = async (row: any) => {
  PxMessageBox.confirm("要删除当前设备运行记录吗？", "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        id: row.id
      };
      await deleteRunRecord(params);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.equip-run-record {
  height: calc(100vh - 249px);
  .equip-table-btns {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .equip-table {
    margin-top: 16px;
    --px-table-border-color: #dfdfdf;

    :deep(.px-table__header) {
      thead {
        tr {
          background-color: #e7eefb !important;

          th {
            font-size: 13px;
            font-weight: bold;
            color: #000;
            background-color: #e7eefb !important;
          }
        }
      }
    }
  }

  .equip-pagination {
    position: absolute;
    right: 8px;
    bottom: 0;
  }
}
</style>
